<template>
  <el-dialog title="短信充值" width="600px" :visible.sync="dialogVisible" @close="dialogVisible=false"
             :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form ref="form" :model="formData">
      <el-form-item label="当前条数" :label-width="formLabelWidth">
        <el-input v-model="formData.sms_num" disabled></el-input>
      </el-form-item>
      <el-form-item label="充值数量"  :label-width="formLabelWidth" prop="num" :rules="[{required: true,message: '请输入充值数量'}]">
        <el-input v-model="formData.num" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="充值备注" :label-width="formLabelWidth">
        <el-input v-model="formData.remark" type="textarea" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible=false">取 消</el-button>
      <el-button type="primary" @click="rechargeSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>

import SupplierApi from "@/api/supplier.js";

export default {
  data() {
    return {
      dialogVisible: false,
      formData: {
        shop_supplier_id: 0,
        sms_num: 0,
        num: '',
        remark: ''
      },
      formLabelWidth: '120px'
    }
  },
  props: ['open_recharge', 'rechargeRow'],
  watch: {
    dialogVisible(value) {
      this.$emit('update:open_recharge', value);
    },
    open_recharge(value) {
      this.dialogVisible = value;
      if (value) {
        this.formData.shop_supplier_id = this.rechargeRow.shop_supplier_id;
        this.formData.sms_num = this.rechargeRow.sms_num||0;
      }
    },
  },

  methods: {
    dialogFormVisible(value) {
      this.dialogVisible = value || false
    },
    rechargeSubmit() {
      let self = this;
      self.$refs.form.validate((valid) => {
        let params = self.formData;
        if (valid) {
          SupplierApi.RechargeApi(params, true).then(res => {
            self.$message({
              message: '恭喜你，操作成功',
              type: 'success'
            });
            self.dialogFormVisible(false);
            self.$emit('refresh');
          }).catch(error => {
          });
        }
      })
    }
  }
}
</script>
